{namespace dce=ArminVieweg\Dce\ViewHelpers}
{namespace ngoos=Ngoos\ViewHelpers}
<f:layout name="Default" />

<f:section name="main">
	<script>
        $(document).ready(function() {
            $('.swipebox').swipebox();
        });
	</script>
    <div id="c-isotope-anchor-1" class="c-content-box c-size-md c-bg-img-center" style="background-image: url(typo3conf/ext/website/Resources/Public/Images/bg-95.jpg)">
        <div class="container">
            <div class="c-content-title-1">
                <h3 class="c-center c-font-uppercase c-font-bold c-font-dark">{field.headline}</h3>
                <div class="c-line-center c-theme-bg"></div>
            </div>
            <div class="c-content-isotope-filter-1 c-center">
                <f:for each="{field.categories}" as="vo">
                    <button class="c-isotope-filter-btn c-font-dark c-theme-border-bottom" data-filter="<f:for each="{vo.category -> dce:explode(delimiter:',')}" as="item" iteration="iterator">,.c-cat-{item}</f:for>">{vo.title}</button>
                </f:for>
            </div>
            <div class="c-content-isotope-gallery c-opt-4">
                <f:for each="{field.products}" as="vo" iteration="itemIteration">
                    <div class="c-content-isotope-item c-cat-{vo.category}">
                        <div class="c-content-isotope-image-container">
                            <f:image class="c-content-isotope-image" src="uploads/pics/{vo.image}" width="220c" height="220c" />
                            <a class="c-content-isotope-overlay swipebox" href="uploads/pics/{vo.image}">
                                <div class="c-content-isotope-overlay-icon">
                                    <h3 class="c-content-isotope-overlay-title c-font-white c-font-uppercase">{vo.title}</h3>
                                </div>
                            </a>
                        </div>
                    </div>
                </f:for>
            </div>
        </div>
    </div>
</f:section>